<template>
      <div class="home_content">
          <div class="home_left">
                 <NavigationBar></NavigationBar>
          </div>
          <div class="box_" style="margin: 0 auto">
              <div class="box_content">
                  <HomeHeader @shutDown="shutDowns"></HomeHeader>
                  <router-view></router-view>
              </div>
          </div>
          <PersonalInformation v-if="shutDown_" @shutDown="shutDown" :item="time_"></PersonalInformation>
          <PromptInformation v-show="greeting_!==''">
              <template v-slot>
                  <span>{{greeting_}}</span>
              </template>
          </PromptInformation>
      </div>
</template>

<script>
import NavigationBar from "@/components/publicCommon/NavigationBar.vue";
import HomeHeader from "@/components/publicCommon/HomeHeader.vue";
import PersonalInformation from "@/components/userInformation/PersonalInformation.vue";
import PromptInformation from "@/components/publicCommon/PromptInformation.vue";

export default {
    name: "Home",
    components: {PromptInformation, PersonalInformation, HomeHeader, NavigationBar},
    emits:['shutDowns'],
    data(){
        return{
            shutDown_:false,
            greeting_:'',
        }
    },
    mounted() {
        let greeting = window.localStorage.getItem("greeting");
        if(!greeting){
            this.greeting_ = "欢迎回来";
            window.localStorage.setItem("greeting",'1');
            setTimeout(()=>{
                this.greeting_ = '';
            },5000)
        }
    },
    methods:{
        time_(){
          return new Date().getTime()
        },
        shutDowns(){
            this.shutDown_ = true;
        },
        shutDown(info){
            if(info === 1){
               setTimeout(()=>{
                   this.$router.push('/userInformationEditing')
               },200)
            }else if(info === 2){
                this.$router.go(0)
            }
            this.shutDown_ = false;
        }
    }
}
</script>

<style scoped>

.box_{
    width: calc(87% - 30px);

}
.box_content{
  background: #F5F5F5;
}
.home_content{
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 100vh;
    min-width: 1600px;
}
.home_left{
    height: 100%;
    min-height: 760px;
    min-width: 245px;
    background: #22252c;
    overflow: auto;
    transition:all ease-in-out .5s;
    border-top: 2px solid #fcfcfd;
}
/* 一般浏览器的不要太小，容易看不见 */
.home_left::-webkit-scrollbar {
    width: 5px;
    height: 3px !important;
}

.home_left::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #f1c3d5;
}
.home_left::-webkit-scrollbar-track {
    border-radius: 0;
    background: #f9f9fc;
}
</style>